<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script th:src="@{/js/jquery-3.3.1.js}"></script>
	<style>
		video{
			width: 100%;
			z-index: 1;
			opacity: 120%;
		}
		.mainBody{
			width: 40%;
			height: 40%;
			position: absolute;
			background-color:rgba(255,255,255,0.4);
			margin: 0 auto;
			z-index: 999;
			top: 27%;
			left: 30%;
			display: flex;
			flex-direction: row;
			border-radius: 10px;
		}
		.left_parent{
			width: 50%;
			height: 100%;
			text-align: center;
			padding: 5px;
		}
		.left_parent div{
			text-align: center;
			margin-top: 5px;
		}
		.right_parent{
			width: 50%;
			height: 100%;
			background-color: rgba(245,253,249,0.35);
			border-radius: 10px;
		}
		.right_child{
			text-align: center;
			margin-top: 10px;
		}
		.register_btn{
			background-color: #2EC154;
			width: 200px;
			opacity: 0.6;
			font-size: 15px;
			outline: none;
			margin-top: 10px;
		}
	</style>
</head>

<body style="margin: 0;padding: 0;">
<!-- 背景部分 -->
<video autoplay="autoplay" muted="muted" loop="loop">
	<source th:src="@{/img/loginBack.mp4}"></source>
</video>
<div class="mainBody">
	<div class="left_parent">
		<div >
			<img th:src="@{/img/building.png}" width="100%" style="opacity: 0.6;"/>
		</div>

	</div>
	<div class="right_parent">
		<div class="right_child">
			<form th:action="@{/user/to_register}">
			<div><img th:src="@{/img/shopName.png}" width="60%"style="opacity: 0.7;"/></div>

			<div class="input-group"style="width: 200px;margin: 0 auto;margin-top: 5px;opacity: 0.7;">
						    <span class="input-group-addon">
								<img th:src="@{/img/user.png}" width="20px"/>
							</span>
				<input type="text" name="username" class="form-control" placeholder="请输入用户名">
			</div>

			<div class="input-group"style="width: 200px;margin: 0 auto;margin-top: 10px;opacity: 0.7;">
						    <span class="input-group-addon">
								<img th:src="@{/img/password.png}" width="20px"/>
							</span>
				<input type="password" name="password" id="passwd1" class="form-control" placeholder="请输入注册密码">
			</div>
			<div class="input-group"style="width: 200px;margin: 0 auto;margin-top: 10px;opacity: 0.7;">
						    <span class="input-group-addon">
								<img th:src="@{/img/password.png}" width="20px"/>
							</span>
				<input type="password" id="passwd2" class="form-control" onblur="fun()" placeholder="请再次输入密码">
			</div>
			<div id="tip" style="display: none;"></div>
			<div class="input-group"style="width: 200px;margin: 10px auto 0;opacity: 0.7;display: flex;flex-direction: row;">

				<input type="text" name="code" class="form-control" placeholder="请输入验证码"style="width: 60%;" >
				<span th:text="${code_tip}" style="color: red"></span>
				<a href="javascript:refreshCode();">
					<img th:src="@{/checkCodeServlet}" title="看不清点击刷新" id="vcode" height="34" />
				</a>

			</div>
			<input type="submit"  class="btn btn-success register_btn" style="outline: none;" value="注 册" />
			</form>
		</div>

	</div>
</div>
<script type="text/javascript">
	function fun() {
		if ($("#passwd1").val()!=$("#passwd2").val()){
			$("#tip").css("color","red");
			$("#tip").css("display","block");
			$("#tip").html("两次密码不一致");
		}else {
			$("#tip").css("display","none");
		}
	}
</script>
<script type="text/javascript">
	function refreshCode(){
		var vcode = document.getElementById("vcode");
		vcode.src="/checkCodeServlet?"+new Date().getTime();

	}
</script>

</body>
</html>
